<script setup lang="ts">
/**
 * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
 */
import {
  getUserPage,
} from "@/api/user";

import { UserQuery, UserPageVO, PageQuery } from "@/api/user/types";

defineOptions({
  name: "User",
  inheritAttrs: false,
});

const queryFormRef = ref(ElForm); // 查询表单

const loading = ref(false);
const ids = ref([]);
const total = ref(0);
const dialog = reactive<DialogOption>({
  visible: false,
});

const queryParams = reactive<UserQuery>({
  page: 1,
  ps: 10,
});

const userList = ref<UserPageVO[]>();


/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  getUserPage(queryParams)
    .then(({ data }) => {
      // userList.value = data.data;
      // total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.page = 1;
  queryParams.deptId = undefined;
  handleQuery();
}

onMounted(() => {
  handleQuery(); // 初始化用户列表数据
});
</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">

      <el-col :lg="24" :xs="24">
        <div class="search-container">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
            <el-form-item label="上级账号" prop="name">
              <el-input v-model="queryParams.deptId" placeholder="输入素材名称" clearable style="width: 200px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="会员UID" prop="name">
              <el-input v-model="queryParams.deptId" placeholder="输入素材名称" clearable style="width: 200px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
              <el-button @click="resetQuery">
                <i-ep-refresh />
                重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never">
          <el-table v-loading="loading" :data="userList">
            <el-table-column label="ID" align="center" prop="id" width="100" />
            <el-table-column label="用户账号" align="center" prop="username" />
            <el-table-column label="用户数" align="center" prop="name" />
            <el-table-column label="充值" align="center" prop="phone" />
            <el-table-column label="赠送" align="center" prop="update_time" />
            <el-table-column label="充提差" align="center" prop="update_time" />
            <el-table-column label="总收益" align="center" prop="update_time" />
          </el-table>
          <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
            v-model:limit="queryParams.ps" @pagination="handleQuery" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>